<template>
	<view>
		<!-- 页面标题 -->
		<view class="smart-page-head">
			<view class="smart-page-head-title">textarea,多行文本</view>
		</view>

		<!-- 内容容器（带内边距） -->
		<view class="smart-padding-wrap">
			<!-- 1. 高度自适应的多行文本框 -->
			<view class="text-desc">输入区域高度自适应，不会出现滚动条</view>
			<textarea class="text-area" auto-height placeholder="请输入内容..." />

			<!-- 2. 红色占位符的多行文本框（修复textarea标签拼写） -->
			<view class="text-desc">占位符字体是红色的</view>
			<textarea class="text-area" placeholder-style="color:#F76260" placeholder="占位符字体是红色的" />
		</view>
	</view>
</template>

<script>
	export default {
		// 修复：data和methods之间添加逗号
		data() {
			return {};
		}, // 关键：添加逗号分隔data和methods
		methods: {}
	};
</script>

<style scoped>
	/* 文本描述的间距 */
	.text-desc {
		font-size: 24rpx;
		color: #333;
		margin-bottom: 15rpx;
		margin-top: 30rpx;
	}

	
	.text-area {
		border: 1px solid #D8D8D8;
		
		width: 100%;
		line-height: 60rpx;
		padding: 20rpx;
		border-radius: 8rpx;
		font-size: 24rpx;
		box-sizing: border-box;
		/* 避免padding撑大宽度 */
	}
</style>